<template>
    <el-dialog v-loading="loading" append-to-body :title="title" :visible.sync="show" width="700px" top="3%">
        <el-form label-width="90px">
            <el-form-item label="图片">
                <vue-avatar
                    id="avatar"
                    :width="456"
                    :height="456"
                    :scale="scale"
                    ref="vueavatar"
                    @vue-avatar-editor:image-ready="onImageReady"
                    >
                </vue-avatar>
            </el-form-item>
            <el-form-item label="Zoom">
                {{scale}}px
                <el-slider :step="0.02" :min='1' :max='3' v-model="scale" style="width:70%"></el-slider>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" style="width: 100px;" @click="saveClicked">保存</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {VueAvatar} from '@/../static/vue-avatar-editor-master'
import {backstage_byteUpload} from '@/api/login'

export default {
    components:{VueAvatar},
    data() {
        return {
            scale: 1,
            show: false,
            loading: false
        }
    },
    props: {
        img: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        }
    },
    methods: {
        async saveClicked() {
            var img = this.$refs.vueavatar.getImageScaled();
            let base = img.toDataURL();
            this.loading = true;
            const {data} = await backstage_byteUpload({fileName: 'img.jpg',img64Byte: base.split('base64,')[1]})
            this.loading = false
            if(data.status === 100){
                const imgUrl = localStorage.getItem('ossPublicUrl') + '/' + data.data.file_path;
                if(this.img == '卐'){
                    this.$emit('addUeditorImg', imgUrl)
                }else{
                    this.$emit('update:img', imgUrl)
                }
                this.show = false
            }
        },
        onImageReady: function onImageReady() {
            this.scale = 1;
        },
        open(){
            this.show = true
            this.$nextTick( () => {
                let canvas = document.getElementById('avatar').firstChild
                // console.log(document.getElementById('avatar'),'canvas')
                // canvas.style.width = '80%'
                // canvas.style.height = '80%'
                canvas.style.width = '354px'
                canvas.style.height = '354px'
            })
        }
    }
}
</script>
